<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
    function displayMedia() {
      let video_elements = document.getElementById("logs").getElementsByTagName("video");
      for (let i = 0; i < video_elements.length; i++) {
        let a_element = video_elements[i].parentNode;
        let img_element = video_elements[i];
        img_element.src = a_element.href;
        img_element.style.display = "block";
      }
      let img_elements = document.getElementById("logs").getElementsByTagName("img");
      for (let i = 0; i < img_elements.length; i++) {
        let a_element = img_elements[i].parentNode;
        let img_element = img_elements[i];
        img_element.src = a_element.href;
        img_element.style.display = "block";
      }
    }

    function hideMedia() {
      let video_elements = document.getElementById("logs").getElementsByTagName("video");
      for (let i = 0; i < video_elements.length; i++) {
        let a_element = video_elements[i].parentNode;
        let img_element = video_elements[i];
        img_element.src = a_element.href;
        img_element.style.display = "none";
      }
      let img_elements = document.getElementById("logs").getElementsByTagName("img");
      for (let i = 0; i < img_elements.length; i++) {
        let a_element = img_elements[i].parentNode;
        let img_element = img_elements[i];
        img_element.src = a_element.href;
        img_element.style.display = "none";
      }
    }

    function gotoTrace() {
      let errorMsg = document.getElementsByClassName("col_error")[0].innerHTML;
      let elements = document.getElementById("logs").getElementsByClassName("error");
      for (let i = 0; i < elements.length; i++) {
        let element = elements[i];
        if (element.innerHTML.indexOf(errorMsg) >= 0) {
          document.documentElement.scrollTop = element.offsetTop;
          break;
        }
      }
    }

    function gotoStep(stepId) {
      let element = document.getElementById(stepId);
      if (element != null) {
        let distance = element.offsetTop - 50;
        document.documentElement.scrollTo(0, distance);
      }
    }
  </script>
  <style>
    body {
      font-size: 0.875em;
      margin-right: 50px;
      margin-left: 50px;
    }

    a:link {
      text-decoration: none;
    }

    #logs div {
      white-space: pre-wrap;
    }

    .aw {
      font-weight: bold;
      color: #1E90FF;
    }

    .aw1 {
      color: #008B45;
    }

    .aw2 {
      color: #00CD00;
    }

    .error,
    .fail,
    .failed,
    .investigated,
    .unavailable {
      color: red;
    }

    .pass,
    .passed {
      color: green;
    }

    .warn,
    .warning {
      color: #FFCC00;
    }

    .operations {
      background-color: white;
      position: sticky;
      top: 0;
    }

    table.steps {
      border-collapse: collapse;
      border: 1px solid #ddd;
    }

    table.steps thead,
    table.steps tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    table.steps tbody {
      display: block;
      max-height: 360px;
      overflow-x: hidden;
      overflow-y: auto;
    }

    table.steps tbody::-webkit-scrollbar {
      width: 0;
    }

    table.steps th,
    table.steps td {
      padding: 1px 5px;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }

    table.steps th {
      background: #C6C6C6;
      text-align: left;
    }

    table.steps td {
      word-break: break-all;
    }

    .col_no {
      width: 3em;
    }

    .col_time {
      width: 7em;
    }

    .col_shot {
      display: none;
    }
  </style>
  <title>{{ case.name }}</title>
</head>

<body>
  <h1>{{ case.name }}</h1>
  <h2>Summary</h2>
  <table class="summary">
    <tbody>
      <tr>
        <td>Begin/End/Elapsed:</td>
        <td>{{ case.begin }}/{{ case.end }}/{{ case.elapsed }}</td>
      </tr>
      <tr>
        <td>Result:</td>
        <td class="{{ case.result | lower }}">{{ case.result | replace("\n", "<br>") }}</td>
      </tr>
      {% if case.error %}
      <tr>
        <td>Error:</td>
        <td class="col_error error">{{ case.error }}</td>
      </tr>
      {% endif %}
    </tbody>
  </table>
  {% if case.steps %}
  <table class="steps">
    <thead>
      <tr>
        <th class="col_no">No.</th>
        <th>Step</th>
        <th>Result</th>
        <th class="col_time">Time(s)</th>
        <th class="col_shot">Screenshot</th>
        {% for head in case.extra_head %}
        <th>{{ head | capitalize }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for step in case.steps %}
      <tr>
        <td class="col_no">{{ loop.index }}</td>
        <td>
          <a href="javascript:" onclick="gotoStep('{{ loop.index0 }}')">{{ step.name }}</a>
        </td>
        {% if step.result == "pass" %}
        <td class="pass">{{ step.result }}</td>
        {% else %}
        <td class="fail">{{ step.result | replace("\n", "<br>") }}</td>
        {% endif %}
        <td class="col_time">{{ step.cost }}</td>
        <td class="col_shot">{{ step.screenshot | join("<br>") }}</td>
        {% for head in case.extra_head %}
        {% if head == "video" and step.video %}
        <td>
          <a href="{{ step.video }}">view video</a>
        </td>
        {% else %}
        <td>{{ step[head] }}</td>
        {% endif %}
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

  <h2>Execution Log</h2>
  <div class="operations">
    <a href="javascript:" onclick="displayMedia()">display media</a> |
    <a href="javascript:" onclick="hideMedia()">hide media</a> |
    <a href="javascript:" onclick="gotoTrace()">goto trace</a>
  </div>
  <div id="logs">
    {% for log in case.logs %}
    <div>{{ log | replace("\n", "<br>") }}</div>
    {% endfor %}
  </div>
</body>

</html>